<head>
	<meta charset='utf-8'>
	<title>打字游戏</title>
	<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
	<link href="css/index.css" type="text/css" rel="stylesheet">
</head>
<body>
	<bgsound src="audio/up.wav" loop="1" />
<div class="divnor"><button>开始游戏</button></div>
	<div  class="bigDiv divnor" id="bigDiv" >
				<div class="title">
					游戏状态：总数:<label id="allCount">0</label>
					正确:<label id="count">0</label>
				</div>
				<div class="lev">
					您的等级:
					<span id="1">新手</span>->
					<span id="2">熟手</span>->
					<span id="3">高手</span>->
					<span id="4" >大师</span>
				</div>
				<div id="up" style="width:385px;height:136px;background-image:url(img/up.gif);position:absolute;margin:20% 20%; z-index:1000;display:none;"></div>
				<div class="divMain" style="background-image:url(img/bg.jpg)">
					<!--吃到苹果或没迟到的时候出现的表情-->
				</div>
				<div class="warn">
					<!--苹果显示区-->
				</div>
				
			</div>
</body>
<script type="text/javascript">
	
	 var Media = new Audio("audio/up.wav"); 
	
	/**
	 * 随机字母
	 */
	var code=0;
	/**
	 * 苹果总数
	 */
	var allCount;
	/**
	 * 正确次数
	 */
	var count;
	
	/**
	 * 是否停止
	 */
	var stop=false;
	
	/**
	 * 等级
	 */
	var levels={
		lvs:[{time:5000,amount:1,level:1},
		{time:3000,amount:2,level:2},
		{time:3000,amount:3,level:3},
		{time:2500,amount:4,level:4}],
		hmark:[5,10,15,18],//分数,
		high:20//最终分数
	};
	
	/**
	 * 当前等级
	 */
	var level;
	
	var warn = {
		win: "url(img/win.gif)",
		lose: "url(img/lose.gif)"
	};
	
	/**
	 * 生产苹果
	 */
	function makeApple(){
		var left=nextInt($(".divnor").width()-59);
		code=String.fromCharCode(nextInt(26)+65);
		return $("<div class='codeDiv' style='background-image:url(img/apple.gif);'>"+code+"</div>")
		.css({left:left}).appendTo($(".divMain"));
	}
	
	/**
	 * 开始
	 */
	function start(){
		if (!stop) {
			var $apple = $(makeApple());
			refresh(++allCount, count);
			$apple.show().animate({
				bottom: "-600px"
			}, level.time, function(){
				$(".warn").css("background-image", warn.lose).fadeIn().fadeOut(1000);
				$apple.hide().remove();
				start();
			});
		}
	}
	
	/**
	 * 取一定范围内的随机数
	 * @param {int} maxNum
	 */
	function nextInt(maxNum){
		if(typeof maxNum ==="number"){
			maxNum=Math.floor(Math.random()*maxNum);
		}
		return maxNum;
	}
	
	/**
	 * 刷新成绩
	 * @param {int} 总次数
	 * @param {int} 正确的次数
	 */
	function refresh(counts,rcount){
		if(typeof counts!="undefined"){
			$("#allCount").text(counts);
		}
		if(typeof rcount!="undefined"){
			$("#count").text(rcount);
			if(rcount<levels.high){
				var marks=levels.hmark;
				for (var i = marks.length-1; i >=0; i--) {//遍历等级分数
					if(count>marks[i]){
						if(levels.lvs[i+1].time<level.time){
							Media.play();
							$('#up').fadeIn(2000,function(){
								$(this).fadeOut(3000);
							})
							newLevel(levels.lvs[i+1]);//更新等级
						}
					}
				}
			}else{
				exitGame();
				alert("恭喜您,已全部通关");
			}
		}
	}
	
	/**
	 * 停止游戏
	 */
	function exitGame(){
		stop=true;
		$(".codeDiv").stop().remove();
		$(".warn").css("background-image","");
		$(document).unbind("keydown");
	}
	
	/**
	 * 刷新等级信息
	 * @param {Object} levels 等级对象
	 */
	function newLevel(levels){
		level=levels;
		$(".lev span").removeClass("level");//移除level样式
		$(".lev span:eq("+(levels.level-1)+")").addClass("level");
	}
	
	/**
	 * 初始化
	 */
	function init(){
		allCount=count=0;
		stop=false;
		/**
		 * 为第一个层添加等级标识
		 */
		newLevel(levels.lvs[0]);
		/**
		 * 绑定按钮按下事件
		 * @param {Object} e
		 */
		$(this).keydown(function(e){
			var incode= String.fromCharCode(e.keyCode);
			if(incode===code){
				count++;
				$(".codeDiv").stop().remove();
				$(".warn").css("background-image",warn.win).fadeIn().fadeOut(1000);
				start();
				refresh(allCount,count);
			}
		});
	}
	
	$(function(){
		
		/**
		 * 绑定点击
		 */
		$(":button").click(function(){
			$("#bigDiv").show().animate({height:500},1000,function(){
				init();
				start();
			});
		});
		
	})
</script>